// import { useObserver } from 'mobx-react'
import Loading from '@/components/PageLoading/index'
import Medal from '@/pages/measurements/result/components/index'
import doubleEleven from '@/resource/double_11.png'
import { ClockCircleOutline, DownOutline, UpOutline } from 'antd-mobile-icons'
import React, { useEffect, useMemo, useState } from 'react'
import { history } from 'umi'
import ShareModal from '../ShareModal'
import { DIMENSION_TYPE } from './dict'
import Hook from './hook'
import styles from './index.module.less'
import PieChart from './Pie'
import Poster from './Poster'
import RadarChart from './Radar'

export default function (props) {
    const { eval_id, share = 0, view } = history.location.query
    const hook = new Hook(eval_id, eval_id)

    const [start_time, setStartTime] = useState(0)

    // 测评结果
    const { medalInfo } = JSON.parse(localStorage.getItem('measurement_result') || '{}')

    useEffect(() => {
        setStartTime(Date.parse(new Date()))
    }, [])

    const RadarMemo = useMemo(() => {
        return <RadarChart chartData={hook.myScore} indicatorData={hook.dimensionScore} />
    }, [hook.myScore, hook.dimensionScore])

    const PieChartMemo = useMemo(() => {
        console.log('1111111111')
        return <PieChart chartData={hook.pieData} rate={hook.rate} defaultItem={hook.info?.name} dimensionType={hook.evalInfo?.dimension_type} />
    }, [hook.pieData, hook.rate, hook.info?.name, hook.evalInfo?.dimension_type])

    useEffect(() => {
        document.title = hook.evalInfo?.name || ''
        return () => {
            document.title = ''
        }
    }, [hook.evalInfo?.name])

    return (
        <React.Fragment>
            {/* <Prompt
        message={location => {
          if (
            ['/measurements', '/measurements/exam', '/measurements/result'].includes(
              location.pathname
            )
          ) {
            return true
          }
          history.goBack()
          return false
        }}
      /> */}

            {/* 双11勋章 modal  */}
            {medalInfo && <Medal medalInfo={medalInfo} />}
            <div className={styles.header_bg} />
            <div
                className={styles.container}
                style={{
                    paddingBottom: '1.3rem',
                }}
            >
                {hook.info ? (
                    <>
                        <div className={styles.header}>
                            <div className={styles.header_title}>{hook.evalInfo?.name}</div>
                            <div className={styles.header_time}>
                                <ClockCircleOutline /> {hook.createTime}
                            </div>
                        </div>

                        {/* 测试结果 */}
                        <div className={styles.result_box_bj}>
                            <div className={styles.result_box}>
                                <div>
                                    <div className={styles.result_header}>
                                        <div className={styles.result_title}>我的测试结果</div>
                                    </div>
                                </div>
                                {hook.info?.cover && (
                                    <div className={styles.result_img}>
                                        <img src={hook.info?.cover} />
                                    </div>
                                )}

                                {/* 总分规则题 */}
                                {hook.evalInfo?.dimension_type === DIMENSION_TYPE.TotalScore && <div className={styles.result_name}>{`${hook.totalScore}分`}</div>}

                                {hook.info?.type && <div className={styles.result_type}>{hook.info?.type}</div>}

                                {hook.info?.name && <div className={styles.result_name}>{hook.info?.name}</div>}

                                {hook.info?.keyword && (
                                    <div className={styles.result_keys}>
                                        <div>{`关键字: ${typeof hook?.info?.keyword === 'string' ? hook?.info?.keyword : hook.info?.keyword?.join('、')}`}</div>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* 分析图 */}
                        <div className={styles.analysis_box}>
                            <div className={styles.analysis_title} />

                            {/* 1-MBTI、2-霍兰德、3-自组题、其他 */}
                            {hook.evalInfo &&
                                ([DIMENSION_TYPE.MBTI, DIMENSION_TYPE.Holland].includes(hook.evalInfo?.dimension_type) ? (
                                    <div className={styles.analysis_chart}>{RadarMemo}</div>
                                ) : (
                                    <div className={styles.analysis_chart}>{PieChartMemo}</div>
                                ))}
                        </div>

                        {/* 默认收起内容 */}
                        {hook.expand &&
                            hook.resultList?.map((item, index) => {
                                const { id, type, name, detail } = item
                                return (
                                    <div key={id} className={index + 1 === hook?.resultList?.length ? styles.last_div_margin : undefined}>
                                        {/* 只有霍兰德显示类型 */}
                                        {hook.evalInfo?.dimension_type === DIMENSION_TYPE.Holland && (
                                            <div className={styles.detail_type}>
                                                <div />
                                                {`${type}(${name})`}
                                            </div>
                                        )}
                                        <div className={styles.detail}>
                                            {detail?.map(item => {
                                                const { id, title, content } = item
                                                return (
                                                    <div key={id} className={styles.detail_box}>
                                                        <div className={styles.detail_title}>
                                                            <div>
                                                                <img src="https://static.zpimg.cn/public/career_sp/measurements/icon_ball.png" />
                                                                {title}
                                                            </div>
                                                            <div className={styles.title_sign} />
                                                        </div>
                                                        <div className={styles.detail_content}>{content}</div>
                                                    </div>
                                                )
                                            })}
                                        </div>
                                    </div>
                                )
                            })}
                        <div className={styles.show_more} onClick={hook.toggleExpand}>
                            {hook.expand ? '收起 ' : '查看详细分析 '}
                            {hook.expand ? <UpOutline /> : <DownOutline />}
                        </div>
                    </>
                ) : (
                    <Loading />
                )}
            </div>

            {/* 分享Canvas */}
            <Poster posterRef={hook.posterRef} data={hook.shareInfo} />

            <div className={styles.operate_box}>
                {/* <div className={styles.operate_detail} onClick={hook.toDetail}>
                    再测一次
                </div> */}
                {view === '1' && (
                    <div className={styles.button_again} onClick={() => history.goBack()}>
                        返回列表
                    </div>
                )}
                {view !== '1' && (
                    <div className={styles.button_again} onClick={hook.reExam}>
                        任务完成
                    </div>
                )}
            </div>

            {/* 分享指引弹窗 */}
            <ShareModal
                visible={hook.shareModalVisible}
                onKnow={() => {
                    hook.setShareModalVisible(false)
                }}
            />
        </React.Fragment>
    )
}
